<template>
  <div class="level-one-page">
    <PowerSupply v-if="page.title === '供配电'"></PowerSupply>
    <div class="tag-container" v-if="page.subPages && page.subPages.length > 0">
      <el-tag
        v-for="(subPage, index) in page.subPages"
        :key="index"
        :type="activeTab === String(index) ? '' : 'info'"
        @click="handleTabClick(String(index))"
        style="cursor: pointer; margin-right: 10px"
      >
        {{ subPage }}
      </el-tag>
    </div>
    <component
      v-if="currentComponent"
      :is="currentComponent"
      :sub-page-index="parseInt(activeTab)"
    />
    <TransportSystemDefault v-else-if="page.title === '运输系统'" />
    <AlarmOperationCommunicationDefault
      v-else-if="page.title === '报警/运行/通讯'"
    />
    <div v-else>
      <h4>{{ page.title }}</h4>
      <p>暂无二级页面内容。</p>
    </div>
  </div>
</template>

<script>
import DrainageSystemPumpRoom from "./DrainageSystemPumpRoom.vue";
import VentilationSystemMainFan from "./VentilationSystemMainFan.vue";
import VentilationSystemLocalFan from "./VentilationSystemLocalFan.vue";
import CompressedAirSystemCompressorRoom from "./CompressedAirSystemCompressorRoom.vue";
import PowerSupplyCentralSubstation from "./PowerSupplyCentralSubstation.vue";
import PowerSupplyGroundSubstation from "./PowerSupplyGroundSubstation.vue";
import VideoMonitoringAll from "./VideoMonitoringAll.vue";
import VideoMonitoringOnline from "./VideoMonitoringOnline.vue";
import VideoMonitoringOffline from "./VideoMonitoringOffline.vue";
import TransportSystemDefault from "./TransportSystemDefault.vue";
import AlarmOperationCommunicationDefault from "./AlarmOperationCommunicationDefault.vue";
import PowerSupply from "./PowerSupply.vue";
const componentMap = {
  排水系统: {
    水泵房: DrainageSystemPumpRoom,
  },
  通风系统: {
    主扇: VentilationSystemMainFan,
    局扇: VentilationSystemLocalFan,
  },
  压风系统: {
    压风机房: CompressedAirSystemCompressorRoom,
  },
  供配电: {
    中央变电所: PowerSupplyCentralSubstation,
    地面变电所: PowerSupplyGroundSubstation,
  },
  视频监控: {
    全部: VideoMonitoringAll,
    // 在线: VideoMonitoringOnline,
    // 中断: VideoMonitoringOffline,
  },
};

export default {
  name: "LevelOnePage",
  components: {
    DrainageSystemPumpRoom,
    VentilationSystemMainFan,
    VentilationSystemLocalFan,
    CompressedAirSystemCompressorRoom,
    PowerSupplyCentralSubstation,
    PowerSupplyGroundSubstation,
    VideoMonitoringAll,
    VideoMonitoringOnline,
    VideoMonitoringOffline,
    TransportSystemDefault,
    AlarmOperationCommunicationDefault,
    PowerSupply,
  },
  props: {
    page: Object,
    initialSubPageIndex: String,
  },
  data() {
    return {
      activeTab: this.initialSubPageIndex,
    };
  },
  computed: {
    currentComponent() {
      const pageTitle = this.page.title;
      const subPageTitle = this.page.subPages[this.activeTab];
      if (componentMap[pageTitle] && componentMap[pageTitle][subPageTitle]) {
        return componentMap[pageTitle][subPageTitle];
      }
      return null;
    },
  },
  watch: {
    page: {
      handler(newPage) {
        if (!newPage.subPages || newPage.subPages.length === 0) {
          this.activeTab = null;
        } else {
          this.activeTab = this.initialSubPageIndex;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleTabClick(tab) {
      this.activeTab = tab;
    },
  },
};
</script>

<style scoped>
.level-one-page {
  flex: 1;
  overflow-y: auto; /* 启用垂直滚动条 */
}
.tag-container {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>



